
<template>
    <div>
        <!-- 基本信息弹窗 -->
        <Modal
            v-model="protocolInfoModal"
            width="1500px"
            styles='text-align:center'
            :closable="false"
            :mask-closable="false"
            footer-hide>
            <div class="container">
                <h2 class="tit">变更复审信息申请填报</h2>
                <Form ref="formValidate" :model="formValidate" :rules="ruleValidate">
                    <div class="left-part">
                        <div class="title">
                            <span style="color:red;">*</span>平台相关协议内容
                        </div>
                        <Row>
                            <Col span="23"> 
                                <!-- 1.患者端协议 -->
							<div class="protocol">
								<div class="dsort">
									<span>1.协议类型：患者端协议</span> 
								</div>
								<div class="sort asd">
									<span >协议名称:</span>
									<div class="inputbox">
										<Input
											v-if="notReview"
											v-model.trim="patientProtocol.protocolName"
											placeholder="请输入协议名称"
											clearable>
										</Input>
										<span style="height:35px" v-else>{{patientProtocol.protocolName}}</span>
									</div>
								</div>
								<div class="sort">
									<span>上传协议内容：</span>
                  <docUploadFile :src="patientProtocol.protocolContentUrl" @getUrl="getPatientProtocolUrl" v-if="notReview" ></docUploadFile>
                  <a :href="fileBaseUrl+patientProtocol.protocolContentUrl">{{patientProtocol.protocolContent}}</a> 
								</div>
							</div>
							<!-- 2.协议类型：患者端协议 -->
							<div class="protocol">
								<div class="dsort">
									<span>2.协议类型：医生端协议</span> 
								</div>
								<div class="sort asd">
									<span >协议名称:</span>
									<div class="inputbox">
										<Input
											v-if="notReview"
											v-model.trim="doctorProtocol.protocolName"
											placeholder="请输入协议名称"
											clearable>
										</Input>
										<span style="height:35px" v-else>{{doctorProtocol.protocolName}}</span>
									</div>
								</div>
								<div class="sort">
									<span>上传协议内容：</span> 
                  <docUploadFile :src="doctorProtocol.protocolContentUrl" @getUrl="getDoctorProtocolUrl" v-if="notReview" ></docUploadFile>
                  <a :href="fileBaseUrl+doctorProtocol.protocolContentUrl">{{doctorProtocol.protocolContent}}</a>
								</div>
							</div>
							<!-- 3.协议类型：患者端协议 -->
							<div class="protocol">
								<div class="dsort">
									<span>3.协议类型：其他协议</span> 
								</div>
								<div class="sort asd">
									<span >协议名称:</span>
									<div class="inputbox">
										<Input
											v-if="notReview"
											v-model.trim="otherProtocol.protocolName"
											placeholder="请输入协议名称"
											clearable>
										</Input>
										<span style="height:35px" v-else>{{otherProtocol.protocolName}}</span>
									</div>
								</div>
								<div class="sort">
									<span>上传协议内容：</span> 
										<docUploadFile :src="otherProtocol.protocolContentUrl" @getUrl="getOtherProtocolUrl" v-if="notReview" ></docUploadFile>
										<a :href="fileBaseUrl+otherProtocol.protocolContentUrl">{{otherProtocol.protocolContent}}</a>
								</div>
							</div>	
                                <!-- 变更原因说明 -->
                                <div class="address hongdian" style="margin-left:55px">                     
                                    <div class="left">  
                                        <span style="color:red;">*</span>                      
                                        <span>变更原因说明：</span>
                                    </div>
                                    <FormItem class="right" prop="reasonChange">
                                        <Input
                                            v-if="notReview"
                                            v-model.trim="formValidate.reasonChange"
                                            placeholder="请输入变更原因"
                                            clearable  
                                            style="width:100%"                       
                                        ></Input>
                                        <div style="magrin-left:-200px;height:35px" v-if="!notReview">{{formValidate.reasonChange}}</div>
                                    </FormItem> 
                                </div>
                            </Col>
                        </Row>
                    </div>
                </Form>
            </div>
            <div class="btn">
                <Button type="info" v-if="notReview" @click="handleSubmit('formValidate',1)" :disabled="disabled">
                    <Icon type="ios-checkmark" style="margin-right:5px;" size="16" />
                    保存并提交
                </Button>
                <Button type="primary" @click="handleSubmit('formValidate',0)" style="margin-left:30px" v-if="notReview" >
                    <i class = "iconfont icon-bianji" style="font-size:14px;margin-right:5px"></i>暂存数据
                </Button>
                <Button @click="protocolInfoModal = false" style="margin-left:30px">
                    <i class = "iconfont icon-butongyi" style="font-size:14px;margin-right:5px"></i>关闭返回
                </Button>
            </div>
        </Modal>
    </div>
</template>
<script>
import api from "@/api/commonApi";
import docUploadFile from "@/components/docUploadFile";
export default {
    components: {
          docUploadFile
    },
    props: {
        protocolInfoModal: String,
        reasonChange: String,
        id: Number,
	  },
    data() {
        return {
            //患者端协议
            patientProtocol:{
              protocolType:1,
              protocolTypeName:"患者端协议",
              protocolName:null,
              protocolContent:null,
              protocolContentUrl:null,
            },
            //医生端协议
            doctorProtocol:{
              protocolType:2,
              protocolTypeName:"医生端协议",
              protocolName:null,
              protocolContent:null,
              protocolContentUrl:null,
            },
            //其他协议
            otherProtocol:{
              protocolType:3,
              protocolTypeName:"其他协议",
              protocolName:null,
              protocolContent:null,
              protocolContentUrl:null,
            },
            formValidate: {
              id: null,
              reasonChange: "",              //变更原因
              protocolList: [],
            },
            ruleValidate: {
              // 单位法人姓名
              reasonChange: [ { required: true, message: "请输入变更原因", trigger: "change" } ],
            },
            notReview: true,
            hospitalId: '',
            backId: '',
        }
    },
    mounted() {
        //复审获取详情
        if(this.id) {
            this.$axios.post(api.findSuperviseProtocolByReviewApplyId, {reviewApplyId: this.id}).then(res => {
              if (res.data.success) {
                let ret = res.data.object || [];
                this.protocolList = ret;
                if(this.protocolList && this.protocolList.length > 0){
                    this.hospitalId = this.protocolList[0].hospitalId
                    this.backId = this.protocolList[0].id
                    this.protocolList.forEach(item=>{
                      if(item.protocolType === "1"){
                        this.patientProtocol = item
                      } else if(item.protocolType === "2"){
                        this.doctorProtocol = item
                      } else {
                        this.otherProtocol = item
                      }
                    })
                }
              }
          });
        } else {
            //获取机构协议列表
            this.getprotocol()
        }       
    },
    created() {

    },
    methods: {
      //协议类型：患者端协议
      getPatientProtocolUrl(map){
          this.patientProtocol.protocolContentUrl = map.url;
          this.patientProtocol.protocolContent = map.name;
      },
      //协议类型：医生端协议
      getDoctorProtocolUrl(map){
          this.doctorProtocol.protocolContentUrl = map.url;
          this.doctorProtocol.protocolContent = map.name;
      },
      //协议类型：患者端协议
      getOtherProtocolUrl(map){
          this.otherProtocol.protocolContentUrl = map.url;
          this.otherProtocol.protocolContent = map.name;
      },
      //根据机构code获取机构协议列表
      getprotocol() {	
			  this.$axios.post(api.findProtocolByOrgCode, {}).then(resp => {
          let ret = resp.data.object
          this.protocolList = ret;
            if(this.protocolList){
                  this.hospitalId = this.protocolList[0].hospitalId
            }
			}).catch(err => {
				console.log(err);
			});
		},       
    //更改审核状态
        updateType(val) {
            this.$axios.post(api.updateReviewStatusById, {id: this.id,reviewStatus:val}).then(resp => {
                    this.$Message.success("操作成功");
                    this.disabled = false 
					          this.protocolInfoModal = false
                    this.$emit('getSuperviseData');
                }).catch(err => {
                    console.log(err);
                });
        },
        // 提交表单
		handleSubmit(name,val) {	    
			this.disabled = true
			this.$refs[name].validate(valid => {
				if (valid) {
          if(this.patientProtocol){
            this.formValidate.protocolList.push(this.patientProtocol);
          }
          if(this.doctorProtocol){
            this.formValidate.protocolList.push(this.doctorProtocol);
          }
          if(this.otherProtocol){
            this.formValidate.protocolList.push(this.otherProtocol);
          }
          this.formValidate.reviewStatus = val
          let url;
					if(this.mode === 'add') {
						this.formValidate.id = ''
					}
          this.formValidate.id = this.hospitalId
          if(this.id){
              url = api.updateSuperviseProtocol
          } else {
              url = api.insertSuperviseProtocol
          }
					console.log(this.formValidate)
					this.$axios.post(url, this.formValidate).then(res => {
						if (res.data.code) {
							let ret = res.data;
							this.updateType(val)
						} else {
							this.disabled = false 
							this.$Message.error(res.data.message);
						}
					})
					.catch(err => {
						this.disabled = false
						this.$Message.error(res.data.err);
					});
				} else {
					this.disabled = false 
					// 必填项填写失败
					this.$Message.error("请检查必填项是否填写正确！");
				}
			});
		},
    },
}
</script>
<style lang="less" scoped>
.tit {
    text-align: center;
    font-weight: 550;
}
.btn {
    width:100%;
    text-align:center;
    margin-bottom: 20px;
}
.container {
    width: 100%;
    margin-bottom: 20px;
    background: #ffffff;
    display: flex;
    flex-direction: column;
      .left-part {
        width: 98%;
        margin: 20px auto;
        margin-left: 1%;
        margin-bottom: 20px;
        border: 1px solid #f0f0f0;
        box-shadow: 0 4px 3px #ebedf8;
        border-radius: 5px;
        .title {
          font-size: 20px;
          padding-left: 15px;
          margin-bottom: 20px;
          color: #333;
          height: 40px;
          line-height: 40px;
          background: #ebedf8;         
        }
        .left {
          flex: 0 0 auto;
          // width: 140px;
          text-align: left;
          margin-right: 5px;
        }
        .right {
          width: 94%;
          text-align: left;
        }
      }
      .right-part {
        width: 98%;
        margin-left: 1%;
        margin-bottom: 20px;
        border: 1px solid #f0f0f0;
        box-shadow: 0 4px 3px #ebedf8;
        border-radius: 5px;
        .title {
          font-size: 20px;
          padding-left: 15px;
          margin-bottom: 10px;
          color: #333;
          height: 40px;
          line-height: 40px;
          background: #ebedf8;
        }
        .left {
          flex: 0 0 auto;
          // width: 210px;
          text-align: left;
          margin-right: 10px;
        }
        .upload-part {
          display: flex;
          position: relative;
          align-items: center;
          top: -10px;
        //   margin-left: 35px;
          margin: 10px 0 0 30px;
          .demo-upload-list {
            display: inline-block;
            width: 100px;
            height: 100px;
            text-align: center;
            line-height: 100px;
            border: 1px solid transparent;
            border-radius: 4px;
            overflow: hidden;
            background: #fff;
            position: relative;
            box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
            margin-right: 4px;
          }
          // 关闭input文本框自动填充背景色黄色
          input:-webkit-autofill {
            box-shadow: 0 0 0px 1000px white inset !important;
          }

          .demo-upload-list img {
            width: 100%;
            height: 100%;
          }
          .demo-upload-list-cover {
            display: none;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(0, 0, 0, 0.6);
          }
          .demo-upload-list:hover .demo-upload-list-cover {
            display: block;
          }
          .demo-upload-list-cover i {
            color: #fff;
            font-size: 20px;
            cursor: pointer;
            margin: 0 2px;
          }
        }
        /deep/ .ivu-input {
          width: 200px;
          margin-right: 20px;
        }
      }
      .button-bottom {
        margin: 20px 0;
        text-align: center;
        button {
          min-width: 100px;
          // height: 50px;
        }
      }
      .ivu-col-offset-6 {
        margin: 0px;
      }
      .region,
      .address {
        display: flex;
        // flex-direction: row;    
        margin-left: 35px;
        .left {
          font-size: 14px;
          padding-top: 5px;
          span:last-child {
            font-weight: 600;
          }
        }
        input {
          display: inline-block;
          width: 400px;
          border: 1px solid black;
          line-height: 30px;
          outline: none;
          background: #fff;
          text-indent: 5px;
        }
      }
      .hongdian{
        margin-left: 25px;
      }
	  .tubiao {
        font-size:16px;
        margin-right:5px;
      }
      .region {
        .ivu-col-span-6 {
        }
        select {
          width: 100px;
          // margin-right: 20px;
          outline: none;
          option {
            text-align: center;
          }
        }
      }
      .hosAddr {
        margin-left: 500px;
      }
		.protocol {
			display: flex;
			margin: 0 40px;
			padding-bottom: 15px;
			.sort {
				width: 40%;
				margin-right: 30px;
				font-size: 14px;
				font-weight: 550;
			}
			.dsort {
				width: 16%;
				margin-right: 20px;
				font-size: 14px;
				font-weight: 550;
			}
			.asd {
				display: flex;
				.inputbox {
					width:83%;
					margin-left: 10px;
				}
			}
		}
	 	.b {
			font-size: 14px;
			color: #ff9966;
			margin-left: 20px;
		} 
        .fuwu {
        width: calc(100%);
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        border-bottom: 1px solid rgb(242, 242, 242);
        .xsfw {
            margin: 0;
            .select_wufu {
                margin: 0 30px;
                display: flex;
                flex-direction: row;
                padding-left: 20px;
                align-items: center;
                flex-wrap: wrap;
                div {
                    width: 13%;
                    margin: 10px 20px;
                    display: flex;
                    flex-direction: row;
                    align-items: center;
					font-size: 14px !important;
					font-weight: 550;
                    input {
                        outline: none;
                        border: none;
                    }
                }
            }
        }
    }
  }
</style>
